<template>
  <div>
    <div class="search-box">
      <a-input @keydown.enter="search" v-model:value="name" class="search-input" placeholder="请输入书名"><template v-slot:prefix><BookOutlined /></template></a-input>
      <a-input @keydown.enter="search" v-model:value="author" class="search-input" placeholder="请输入作者"><template v-slot:prefix><UserOutlined /></template></a-input>
      <a-button type="primary" @click="search">搜索</a-button>
    </div>
    <a-table rowKey="id" :columns="columns" :data-source="data" :pagination="pagination" @change="handleTableChange">
      <template v-slot:cover="{ text }">
        <img class="book-img" :src="$http.baseURL+'/public/pic/'+text" alt="">
      </template>
      <template v-slot:stock="{ text,record }">
        {{record.stock}}/{{record.total}}
      </template>
      <template v-slot:customTitle>
        <SmileOutlined /> 封面
      </template>
      <template v-slot:action="{ text }">
        <a-button :disabled="text.stock==='0'||total===5||recordIds.includes(text.id)" type="primary" @click="addRecord(text)">借阅</a-button>
        <template v-if="$root.isAdmin">
          <a-button type="primary" @click="getRecord(text)">查看</a-button>
          <a-button @click="update(text)">修改</a-button>
          <!-- <a-button type="danger" @click="deleteBook(text)">删除</a-button> -->
        </template>
      </template>
    </a-table>
  </div>
</template>
<script>
const columns = [
  {
    dataIndex: 'cover',
    slots: { title: 'customTitle',customRender: 'cover' },
  },
  {
    title: '书名',
    dataIndex: 'name',
  },
  {
    title: '作者',
    dataIndex: 'author',
  },
  {
    title: '简介',
    dataIndex: 'introduction',
  },
  {
    title: '出版社',
    dataIndex: 'publisher',
  },
  {
    title: '价格',
    dataIndex: 'price',
    width: 60
  },
  {
    title: '库存',
    dataIndex: 'stock',
    slots: { customRender: 'stock' },
  },
  {
    title: '操作',
    slots: { customRender: 'action' },
  },
];
export default {
  data() {
    return {
      data:[],
      name:'',
      author:'',
      total:0,
      recordIds:[],
      columns,
      pagination:{
        current:1,
        pageSize: 10,
        total:0
      }
    };
  },
  methods:{
    addRecord(obj){
      this.$http.get('/addRecord',{bookId:obj.id,book:obj.name,user:localStorage.username}).then(_=>{
        this.$message.success(`借阅 ${obj.name} 成功`)
        this.search()
        this.getRecordId()
      })
    },
    getRecord(obj){
      this.$router.push({name:'record',params:{book:obj.name}})
    },
    handleTableChange(pagination){
      this.pagination.current = pagination.current
      this.search()
    },
    deleteBook(obj){
      this.$confirm({
        title: `确认删除《${obj.name}》吗？`,
        content: '删除后不可恢复',
        okText: '确定',
        cancelText: '取消',
        onOk:() => {
          this.$http.get('/deleteBook',{id:obj.id}).then(_=>{
            this.$message.success(`删除 ${obj.name} 成功`)
            this.search()
          })
        },
      });
    },
    update(obj){
      this.$root.bookData = obj
      this.$router.push('/add')
    },
    search(){
      var obj = {
        current: this.pagination.current,
        pageSize: this.pagination.pageSize,
      }
      if(this.name){
        obj.name = this.name
      }
      if(this.author){
        obj.author = this.author
      }
      this.$http.get('/search',obj).then(_=>{
        this.data = _.data
        this.pagination.total = _.total
      })
    },
    getRecordId(){
      this.$http.get('/getRecordId',{user:localStorage.username}).then(_=>{
      this.recordIds = _.data
      this.total = _.total
    })
    }
  },
  created(){
    if(!localStorage.token){
      return this.$router.push('/login')
    }
    this.search()
    this.getRecordId()
  }
};
</script>
<style>
.book-img{
  width: 80px;
}
</style>